// 一、获取表单元素节点
// 1.快速获取节点的方法在这里依然使用
// 2.document.forms:获取页面中所有的表单元素，返回值是伪数组对象
// console.log(document.forms[0]);
// console.log(document.forms["two"]);
// console.log(document.forms["xyz1"]);

// 3.document.表单元素的name名字
// 注意：该方法的返回值根据页面中表单的数量不同，返回值不同
// 如果页面中只有一个该name名字的表单，就返回该表单元素对象
// 如果页面中有多个该name名字的表单，就返回伪数组对象
// console.log(document.xyz2);

// let ran=document.getElementById("ran");
// let number=document.getElementById("number");
// ran.onmouseenter=function(){
//     number.innerText=ran.value;
//     number.style.display="block";
// }
// ran.onmouseleave=function(){
//     number.style.display="none";
// }
// ran.onchange=function(){
//     number.innerText=ran.value;

// }

// 二、表单相关事件
let form = document.getElementById("one");
// 1.submit:表单提交事件，在表单中点击提交按钮，就会触发该事件
// 注意：该事件是绑定在form元素节点上面的，不是绑定在提交按钮上面的
// form.onsubmit=function(){
//     // 验证表单内容
//     // alert("数据提交之前，做验证表单内容");
//     let tel=document.getElementById("tel");
//     let telReg=/^1[3456789]\d{9}$/;
//     if(telReg.test(tel.value)){
//         alert("数据上传");
//     }else{
//         console.log("阻止默认行为");
//         event.preventDefault();
//         // 阻止默认行为，取消数据上传
//     }
// }

// 2.reset:表单重置事件，在表单中点击重置按钮，就会触发该事件
// 注意：该事件是绑定在form元素节点上面的，不是绑定在重置按钮上面的
// form.onreset = function () {

//     alert("重置成功");
//     // event.preventDefault();
//     // 阻止默认行为，取消重置
// }

// 3.form节点.submit():表单提交数据方法
// 4.form节点.reset():表单重置数据方法

// let sub2=document.getElementById("sub2");
// let sub3=document.getElementById("sub3");
// sub2.onclick=function(){
//     form.submit();
// }

// sub3.onclick=function(){
//     form.reset();
// }

// 5.focus:获取焦点事件
// let tel = document.getElementById("tel");
// let telReg = /^1[3456789]\d{9}$/;

// tel.onfocus=function(){
//     console.log("提示信息")
// }
// 6.blur:失去焦点事件
// tel.onblur=function(){
//     if(telReg.test(tel.value)){
//         console.log("是手机号")
//     }else{
//         console.log("不是手机号")
//     }
// }

// 6.change：值改变事件(必须要失去焦点之后才会触发该事件)
// tel.onchange=function(){
//     console.log(tel.value);
// }

// 7.input：值改变事件（不需要失去焦点）
// tel.oninput=function(){
//     console.log(tel.value);
// }

// 三、操作下拉列表
let select = document.getElementById("list");
// 1.增加选项
let newOption = new Option("葡萄", "putao");
// 第一个参数是option标签内容部分
// 第二个参数是option标签value
select.options.add(newOption);

// 2.修改选项
select.options[3].value = "pingguo";
select.options[3].text = "苹果";

// 3.删除选项
select.options.remove(2); //删除下标为2的选项
// select.options.length=0;//删除所有选项
// select.onchange = function () {
//     console.log(select.value);
// }

let qwe = document.getElementById("qwe");

select.onclick=function(){
    if(event.target.localName==="option"){
        console.log(123)
        if(event.target.getAttribute("selected")==="true"){
            event.target.setAttribute("selected","false");
            event.target.style.backgroundColor="white";

        }else{
            event.target.setAttribute("selected",true);
            event.target.style.backgroundColor="yellow";
        }
        
    }
}


qwe.onclick = function () {
    event.preventDefault();
    let arr = [];

    for (let i = 0; i < select.options.length; i++) {
        console.log(select.options[i].selected);
        if (select.options[i].getAttribute("selected")==="true") {
            arr.push(select.options[i]);

        }
    }
    console.log(arr);

}

